<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul li {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background: #f00;
				margin: 50px auto;
				list-style: none;
				text-align: center;
				line-height: 100px;
				font-size: 20px;
				color: white;
			}

			ul li:nth-child(2) {
				transform: rotate(45deg);
			}
			
			ul li:nth-child(3) {
				transform: translate(100px, 0px);
			}
			
			ul li:nth-child(4) {
				transform: scale(1.2, 0.8);
			}
			
			/* 
			 如果需要进行多个转换, 那么用空格隔开。
			 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的			 
			 */
			ul li:nth-child(5) {
				transform: rotate(45deg) translate(0px, 0px) scale(1.5, 1.5);
			}
			
		</style>
	</head>
	<body>
		<!-- 
		 2D转换模块
		 格式：transform：值；
		 取值：
		 transform: rotate(45deg);（顺时针旋转45度,deg是单位代表多少度）
		 transform: translate(100px, 0px)（平移。第一个参数:水平方向， 第二个参数:垂直方向）
		 transform: scale(1,0.5);（缩放倍数。第一个参数:水平方向,第二个参数:垂直方向）
		注意：
		如果取值是1, 代表不变。如果取值大于1, 代表需要放大。如果取值小于1, 代表需要缩小。
		如果水平和垂直缩放都一样, 那么可以简写为一个参数
		transform: scale(0.5);
		scale缩放后，子元素也会跟着缩放(参考07-补充缩放.html)
		-->

		<ul>
			<li>正常的</li>
			<li>旋转的</li>
			<li>平移的</li>
			<li>缩放的</li>
			<li>综合的</li>
		</ul>
	</body>
</html>
